<template>
  <div class="app-container calendar-list-container">
    <div class="pds-tip">
      <div class="title">
        Condition管理
      </div>
    </div>
    <el-form :inline="true" :model="filter" class="demo-form-inline">
      <el-form-item label="客户">
        <el-select placeholder="请选择客户" v-model="filter.customerCode" filterable remote reserve-keyword :remote-method="getPdsCustomerByName" clearable>
          <el-option v-for="option in customerList" :key="option.value" :label="language=='en'?option.labelEnUs:option.labelZhCh" :value="option.code">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="有效期">
        <el-date-picker v-model="filter.validityPeriod" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button class="filter-item" type="success" icon="search" v-show="filter.customerCode" @click="edit()" >新增</el-button>
      </el-form-item>
    </el-form>
  <el-table
    :data="tableData" border fit highlight-current-row
    style="width: 100%">
    <el-table-column
      fixed
      prop="customerCode"
      label="客户编码"
      width="150">
    </el-table-column>
    <el-table-column  
      prop="effectiveTime"
      label="生效日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="overseasCompanyOperatingCosts"
      label="海外公司运营费用"
      width="150">
    </el-table-column>
    <el-table-column
      prop="overseasCompanyProfit"
      label="海外公司利润"
      width="150">
    </el-table-column>
    <el-table-column
      prop="salesRebate"
      label="销售返点"
      width="150">
    </el-table-column>
    <el-table-column
      prop="commission"
      label="佣金"
      width="150">
    </el-table-column>
    <el-table-column
      prop="quantityAmountRebate"
      label="数量金额返点"
      width="150">
    </el-table-column>
    <el-table-column
      prop="specialDiscount"
      label="特殊折扣"
      width="150">
    </el-table-column>
    <el-table-column
      prop="otherTypesRebates"
      label="其他类型返点"
      width="150">
    </el-table-column>
    <el-table-column
      prop="warrantyDiscount"
      label="质保折扣"
      width="150">
    </el-table-column>
    <el-table-column
      prop="marketSupportCost"
      label="市场支持费用"
      width="150">
    </el-table-column>
    <el-table-column
      prop="returnGoods"
      label="退货"
      width="150">
    </el-table-column>
    <el-table-column
      prop="afterServiceCharge"
      label="售后服务费用"
      width="150">
    </el-table-column>
    <el-table-column
      prop="productLiabilityInsurance"
      label="产品责任险"
      width="150">
    </el-table-column>
    <el-table-column
      prop="customerEntertainmentExpenses"
      label="客户销售费用公共费用招待费用等等"
      width="150">
    </el-table-column>
    <el-table-column
      prop="paymentExpenses"
      label="付款方式导致的费用"
      width="150">
    </el-table-column>
    <el-table-column
      prop="creditInsurance"
      label="信用保险"
      width="150">
    </el-table-column>
    <el-table-column
      prop="euWeeeCosts"
      label="欧盟WEEE费用用于DDUDDP交易"
      width="150">
    </el-table-column>
    <el-table-column
      prop="materialFloatingReservation"
      label="材料浮动预留"
      width="150">
    </el-table-column>
    <el-table-column
      prop="exchangeFloatingReservation"
      label="汇率浮动预留"
      width="150">
    </el-table-column>
    <el-table-column
      prop="oceanFreight"
      label="海运费"
      width="150">
    </el-table-column>
    <el-table-column
      prop="ddpCostYatWarehouse"
      label="DDP成本到亚特海外仓库"
      width="150">
    </el-table-column>
    <el-table-column
      prop="ddpCostCustomerWarehouse"
      label="DDP成本到客户海外仓库"
      width="150">
    </el-table-column>
    <el-table-column
      prop="overseasWarehousesOperatingCosts"
      label="海外仓库的运营费用"
      width="150">
    </el-table-column>
    <el-table-column
      prop="overseasExpenses"
      label="海外从清关至运输到仓库或门店的费用"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row.id)" type="primary" v-if="scope.row.status === 0" size="small">编辑</el-button>
        <el-button @click="change(scope.row.id,1)" type="warning" v-if="scope.row.status === 0" size="small">启用</el-button>
        <el-button @click="change(scope.row.id,0)" type="danger" v-if="scope.row.status !== 0" size="small">禁用</el-button>
      </template>
    </el-table-column>
  </el-table>

    <!-- <div class="sroll-wrap">
      <div class="flex-wrap">
        <div class="scroll-title">
          <div>生效日期</div>
          <div v-for="(item, index) in labelList" :key="index">{{item.label}}</div>
        </div>
        <div class="scroll-item" v-for="(item, index) in list" :key="index">
          <div>{{item.date}}</div>
          <div v-for="(subItem, subIndex) in labelList" :key="'sub'+subIndex">5.00%</div>
        </div>
        <div class="add-btn" @click="dialogVisible = true">
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div> -->

    <el-dialog title="添加条款" :visible.sync="dialogVisible" width="40%">
      <el-form :model="editForm" ref="editForm" class="demo-form-inline" label-width="200px" label-suffix="：">
        <el-form-item :label="language=='en'?item.labelEnUs:item.label" v-for="(item, index) in labelList" :key="index" :prop="item.key" label-width="280px">
          <el-input v-if="item.label !== '生效日期'" type="number" v-model="editForm[item.key]" required></el-input>
          <el-date-picker v-else v-model="editForm[item.key]" placeholder="请选择" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import * as api from '@/api/sale/condition/index';
import * as saleApi from '@/api/sale/index';
export default {
  computed: {
    ...mapGetters([
      'language'
    ])
  },
  data() {
    return {
      filter: {
        customerCode: null,

      },
      labelList: [
        { label: '生效日期',labelEnUs:'生效日期', key: 'effectiveTime' },
        { label: '海外公司运营费用',labelEnUs:'Subsidiary OH', key: 'overseasCompanyOperatingCosts' },
        { label: '海外公司利润',labelEnUs:'Subsidiary Profit', key: 'overseasCompanyProfit' },
        { label: '销售返点',labelEnUs:'Sales Rebate', key: 'salesRebate' },
        { label: '佣金',labelEnUs:'Commission', key: 'commission' },
        { label: '数量金额返点',labelEnUs:'Volume rebate', key: 'quantityAmountRebate' },
        { label: '特殊折扣', labelEnUs:'Special Discounts', key: 'specialDiscount' },
        { label: '其他类型返点', labelEnUs:'Other rebate', key: 'otherTypesRebates' },
        { label: '质保折扣',labelEnUs:'Warranty discount', key: 'warrantyDiscount' },
        { label: '市场支持费用',labelEnUs:'Marketing Support', key: 'marketSupportCost' },
        { label: '退货',labelEnUs:'Returns provision', key: 'returnGoods' },
        { label: '售后服务费用', labelEnUs:'After sales Service', key: 'afterServiceCharge' },
        { label: '产品责任险',labelEnUs:'PLI', key: 'productLiabilityInsurance' },
        { label: '客户销售费用公共费用招待费用等等',labelEnUs:'Approval cost', key: 'customerEntertainmentExpenses' },
        { label: '付款方式导致的费用',labelEnUs:'Payment term', key: 'paymentExpenses' },
        { label: '信用保险', labelEnUs:'Credit Insurance', key: 'creditInsurance' },
        { label: '欧盟WEEE费用用于DDUDDP交易',labelEnUs:'WEEE cost', key: 'euWeeeCosts' },
        { label: '材料浮动预留',labelEnUs:'Material Floating', key: 'materialFloatingReservation' },
        { label: '汇率浮动预留',labelEnUs:'FX floating', key: 'exchangeFloatingReservation' },
        { label: '海运费',labelEnUs:'Sea Freight', key: 'oceanFreight' },
        { label: 'DDP成本到亚特海外仓库',labelEnUs:'DDP cost to overseas  warehouse', key: 'ddpCostYatWarehouse' },
        { label: 'DDP成本到客户海外仓库',labelEnUs:'DDP cost to customer warehouse', key: 'ddpCostCustomerWarehouse' },
        { label: '海外仓库的运营费用',labelEnUs:'Warehousing', key: 'overseasWarehousesOperatingCosts' },
        { label: '海外从清关至运输到仓库或门店的费用',labelEnUs:'Outbound freight', key: 'overseasExpenses' }
      ],
      tableData: [],
      customerList: [],
      list: [{ date: '2018-05-01' }, { date: '2018-05-06' }, { date: '2018-05-06' }],
      dialogVisible: false,
      editForm: {}
    }
  },
  methods: {
    search() {
      console.log(this.filter)
      if (this.filter.customerCode !== '') {
      api.getPage({
          customerCode: this.filter.customerCode
        })
        .then(response => {
          console.log(response)
          this.tableData = response.data;
          //this.list = response.data.rows;
        })
      }
    },
    edit(params) {
      if (params) {
      api.getCustomerTermDetail({
          id: params
        })
        .then(response => {
          this.editForm = response.data;
          //this.list = response.data.rows;
        })
      }else {
        this.editForm = {}
      }
       this.dialogVisible = true
    },
    //改变状态
    change(id,status) {
      if (id) {
      const params = {
          id: id,
          status: status
        }
      api.modifyStatus(params)
        .then(response => {
          if(response.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.search()
          }
        })
      }
    },
    getPdsCustomerByName(val) {
      if (val !== '') {
        saleApi
          .getPdsCustomerByName({
            customerName: val
          })
          .then(res => {
            res.data.map(row => {
              row.labelEnUs = row.shortName;
              row.labelZhCh = row.shortName;
              row.value = row.code;
            });
            this.customerList = res.data;
          });
      }
    },
    submit() {
      this.$refs.editForm.validate(valid => {
        console.log(this.editForm)
        if (valid) {
        const params = {
          ...this.editForm,
          customerCode: this.filter.customerCode
        }
        api.addCustomerTerm(params).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功!',
              type: 'success'
            });
            this.dialogVisible = false;
            this.search()
          }
        })
        } else {
          this.$message.info('信息未填写完整')
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.sroll-wrap {
  width: 100%;
  border: 1px solid #aaa;
  overflow-x: auto;
  padding: 10px;
  .flex-wrap {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
  }
  .scroll-title {
    flex: none;
    width: 150px;
    text-align: center;
    font-size: 14px;
    margin-right: 10px;
    div {
      height: 40px;
      line-height: 40px;
      margin-bottom: 1px;
      background: #eee;
    }
  }
  .scroll-item {
    flex: none;
    width: 100px;
    border: 1px solid #aaa;
    text-align: center;
    font-size: 14px;
    div {
      height: 41px;
      line-height: 41px;
      border-bottom: 1px solid #aaa;
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .add-btn {
    flex: none;
    width: 100px;
    border: 2px dashed #aaa;
    margin-left: 10px;
    font-size: 40px;
    font-weight: bold;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
